<template>
    <pageBox>
        <view class="briefing" >
            <view class="status_bar">
                <!-- 这里是状态栏 -->
            </view>
            <!-- 头部选项栏 -->
            <view class="bgTop ">
                <view class="uni-list leftNav  ">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-db">
                            <picker ref="pickerRef" mode="selector" :value="array.index" :range="array.list" range-key="name" @change="bindPickerChange" style="color:#ffffff; position:relative; top:33rpx;right:-20rpx">{{selectData}}</picker>
                            <!-- <view @tap="changeShow('QS_Picekr_custom2_1')" style="color:#ffffff ; position:relative; top:33rpx ;right:-20rpx">{{selectData}}</view>
                        <QSpicker type="custom2" ref="QS_Picekr_custom2_1" pickerId="custom2_1" :dataSet="custom2Set_1" showReset @hideQSPicker="hideQSPicker($event)" @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" height=.2 zIndex="99999"/> -->
                        </view>
                    </view>
                </view>
            </view>
            <view class="time-txt">数据时间：{{ tiemTxt }}</view>

            <row :arr="overView" :heightLight="true" @bindTab="bingTab"></row>

            <view class="day-type flex-box">
                <view class="day-nav flex-box">
                    <picker @change="bindPickerStartDay" :value="time.start" mode="date">
                        <view class="flex-box">
                            <view class="icon calender"></view>
                            <text class="fx1" style="line-height:40rpx">{{ time.start }}</text>
                        </view>
                    </picker>
                    <text style="line-height:40rpx">至</text>
                    <picker @change="bindPickerEndDay" :value="time.end" mode="date">
                        <view class="flex-box items">
                            <text class="fx1" style="line-height:40rpx">{{ time.end }}</text>
                        </view>
                    </picker>
                </view>

                <view class="type-nav flex-box items">
                    <view class="item" v-for="(item, index) in tableType.t" :key="index" @tap="changeType(index)" :class="{ act: index == tableType.current }">
                        <text>{{ item.des }}</text>
                    </view>
                </view>
            </view>
            <!-- 最近  lately -->
            <view class="lately" v-show=" tableType.current ==0">
                <view class="lately-nav flex-box">
                    <view class="item" v-for="(item, index) in lately.txtArr" :key="index" @tap="changeTime(index)" :class="{ act: index == lately.current }">
                        <text>{{ item }}</text>
                    </view>
                </view>
            </view>

            <view class="t">
                <!-- 柱状图 -->
                <view v-show="tableType.current === 1">
                    <view class="qiun-columns">
                        <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
                        </view>
                        <view class="qiun-charts">
                            <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
                        </view>
                    </view>
                </view>

                <!-- 表格 -->
                <view v-show="tableType.current === 0">
                    <view class="table-box">
                        <view class="table-tt">
                            <view class="tr flex-box ">
                                <view class="td">时间</view>
                                <view class="td">平均能耗</view>
                                <view class="td">产能</view>
                                <view class="td">能耗</view>
                                <view class="td">进车数</view>
                            </view>
                        </view>
                        <view class="table-tt navTop" v-show="navTop">
                            <view class="tr flex-box ">
                                <view class="td">时间</view>
                                <view class="td">平均能耗</view>
                                <view class="td">产能</view>
                                <view class="td">能耗</view>
                                <view class="td">进车数</view>
                            </view>
                        </view>
                        <view class="table-body " v-if="isPermission('YieldReport_list')">
                            <view class="tr flex-box" v-for="(item, index) in table" :key="index">
                                <view class="td" style="font-size:27rpx">{{ item.statistics_date }}</view>
                                <view class="td">{{ item.unit_consumption }}</view>
                                <view class="td">{{ item.yield }}</view>
                                <view class="td">{{ item.consumption }}</view>
                                <view class="td">{{ item.card_num }}</view>
                            </view>
                        </view>
                        <view v-show="tbale.length == 0" style="font-size:38rpx;text-align:center;color:#c3c3c3">已无更多数据了..</view>
                    </view>
                </view>
            </view>
        </view>
    </pageBox>
</template>

<script>
import QSpicker from "../../components/QuShe-picker/QuShe-picker.vue"
import Row from "../../comon/C/row4.vue";
import uCharts from "../../comon/js/u-charts.min.js";
import {
    request
} from "../../comon/js/request.js"
import catalogVue from '../user/catalog/catalog.vue';
import log from '../../components/QS-inputs-split/config/js/log';
var _self;
var canvaLineA = null;
export default {
    data() {
        return {
            booler: true,
            rootBool: true,
            maxPage: "",
            selectDay: 0,
            formdata: {
                equipment_id: "",
                near_hour: "",
                page: 1
            },
            day1: 0,
            // showDate:0,
            navTop: false,
            showTd: 0,
            tuBiaoId: "",
            selectData: "请选择",
            array: {
                list: [],
                index: 0
            },
            custom2Set_1: {
                itemArray: [
                    [{
                        name: "a", //name变量名需与下方steps.steps_1_value相同
                        value: "a" //可添加多项自定义想要的数据
                    }],
                ],
                steps: {
                    step_1_value: "name", //第一级显示的属性名
                    step_2_value: "", //第二级显示的属性名
                    step_3_value: "" //第三级显示的属性名
                },
                defaultValue: [0, 0] //初始数据
            },

            changTips: true,
            //柱状图
            cWidth: "rpx",
            cHeight: "rpx",
            pixelRatio: 1,
            serverData: "",
            series: [{
                name: "",
                data: "",
                color: ""
            }],

            tiemTxt: "",
            time: {
                start: "选择开始时间",
                end: "选择结束时间"
            },
            tableType: {
                current: 0,
                t: [{
                        des: "列表",
                        isAct: true
                    },
                    {
                        des: "图表",
                        isAct: false
                    }
                ]
            },
            overView: [{
                    number: 0,
                    des: "平均能耗"
                },
                {
                    number: 0,
                    des: "产能"
                },
                {
                    number: 0,
                    des: "能耗"
                },
                {
                    number: 0,
                    des: "进车数"
                }
            ],
            lately: {
                current: 0,
                txtArr: ["最近七天", "最近十五天", "最近三十天"],
                week: {}
            },
            table: [],
            Column: {
                //x轴年份
                // categories: ["10:24", "10:24", "10:24", "10:24", "10:24", "10:24", "10:24", "10:24", "10:24", "10:24"],
                categories: [],
                //模拟返回的两条柱状图,是个数组
                series: [{
                    name: "平均能耗",
                    color: "#0062a1",
                    // data: [0, 0, 0, 0, 0, 0, 0],
                    data: [],
                    //返回的图像类型
                    type: "column"
                }]
            }
        };
    },

    onReachBottom() {
        if (this.formdata.page <= this.maxPage) {
            this.upInit();

        }
    },

    onPullDownRefresh() {
        this.getSon();
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 3000);
    },
    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop >= 300) {
            if (!this.navTop) {
                this.navTop = true
            }
        } else {
            if (this.navTop) {
                this.navTop = false
            }
        }
    },
    methods: {
        //隐藏列表
        isPermission(name) {
            let data = uni.getStorageSync("dataCenter") // 缓存起来的数组
            if (data.length) {
                return data.includes(name)
            } else {
                if (this.rootBool === true) {
                    uni.showToast({
                        title: '您暂无权限,请联系管理员',
                        icon:"none",
                        duration: 3000
                    });
                }
                return false
            }
        },

        // 上拉加载更多
        upInit() {
            request({
                url: "v1/YieldReport/list",
                data: this.formdata
            }).then(res => {
                this.formdata.page++
                console.log(res)
                this.maxPage = res.data.result.list.last_page
                this.table = this.table.concat(res.data.result.list.data)
            })
        },

        //点击确定触发
        bindPickerChange(e) {
            let pickerId = this.array.list[e.detail.value].id

            this.formdata = {
                equipment_id: pickerId,
                statistics_date_start: "2019-10-10",
                statistics_date_end: this.getYear()
            }
            this.tuBiaoId = pickerId
            this.selectData = this.array.list[e.detail.value].name
            request({
                url: "v1/YieldReport/list",
                data: this.formdata
            }).then(res => {
                if (res.data.result.list.data.length === 0) {
                    this.overView[0].number = 0
                    this.overView[1].number = 0
                    this.overView[2].number = 0
                    this.overView[3].number = 0
                    this.table = []
                    this.Column.categories = []
                    this.Column.series[0].data = []
                } else {
                    let table8 = res.data.result.list.data
                    this.overView[0].number = table8[0].unit_consumption
                    this.overView[1].number = table8[0].yield
                    this.overView[2].number = table8[0].consumption
                    this.overView[3].number = table8[0].card_num
                    this.table = res.data.result.list.data
                }
            })
        },
        //获取当前年月日
        getYear() {
            let timestamp = Date.parse(new Date());
            let date = new Date(timestamp);
            //获取年份  
            let Y = date.getFullYear();
            //获取月份  
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
            //获取当日日期 
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return Y + '-' + M + '-' + D
            // console.log( Y + '-' + M + '-' + D)
        },
        getYear2(num) {
            let timestamp = Date.parse(new Date());
            let date = new Date(timestamp);
            //获取年份  
            let Y = date.getFullYear();
            //获取月份  
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
            //获取当日日期 
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return Y + '-' + M + '-' + D - num
            console.log(Y + '-' + M + '-' + D)
            console.log(num, "numnumnumnumnumnumnumnumnumnum")
        },
        //切换导航
        bingTab(e) {
            if (e === 0) {
                this.showTd = 0
                this.Column.series[0].name = "平均能耗"
                // this.formdata = {
                //     equipment_id: this.tuBiaoId,
                //     near_hour: this.selectDay
                // }
                this.getQieHuanShuzu66(0, this.selectDay)
                // this.$set(this.Column.series[0], "name", "平均能耗")
            } else if (e === 1) {
                this.showTd = 1
                this.Column.series[0].name = "产能"
                // this.formdata = {
                //     equipment_id: this.tuBiaoId,
                //     near_hour: this.selectDay
                // }
                this.getQieHuanShuzu66(1, this.selectDay)
                // this.$set(this.Column.series[0], "name", "产能")

            } else if (e === 2) {
                this.showTd = 2
                this.Column.series[0].name = "能耗"
                // this.formdata = {
                //     equipment_id: this.tuBiaoId,
                //     near_hour: this.selectDay
                // }
                this.getQieHuanShuzu66(2, this.selectDay)
                // this.$set(this.Column.series[0], "name", "能耗")

            } else if (e === 3) {
                this.showTd = 3
                this.Column.series[0].name = "进车数"
                // this.formdata = {
                //     equipment_id: this.tuBiaoId,
                //     near_hour: 7,
                //     near_hour: this.selectDay
                // }
                this.getQieHuanShuzu66(3, this.selectDay)
                // this.$set(this.Column.series[0], "name", "进车数")

            }
        },
        changeTab(index) {
            console.log(1111111)
        },
        changeShow(name) {
            this.$refs[name].show();
        },
        showQSPicker(res) {
            console.log(`pickerId为${res.pickerId},  类型为${res.type}的QS-picker显示了`);
        },
        hideQSPicker(res) {
            console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker隐藏了了`);
        },
        confirm(res) {
            // console.log('获取了用户选择----->' + JSON.stringify(res));
            console.log('获取了用户选择----->', res);
            this.tuBiaoId = res.data[0].id
            this.selectData = res.data[0].name
            request({
                url: "v1/YieldReport/list",
                data: {
                    equipment_id: res.data[0].id,
                    statistics_date_start: "2019-10-10",
                    statistics_date_end: this.getYear()
                }
            }).then(res => {
                if (res.data.result.list.data.length == 0) {
                    this.overView[0].number = 0
                    this.overView[1].number = 0
                    this.overView[2].number = 0
                    this.overView[3].number = 0
                    this.Column.categories = []
                    this.Column.series[0].data = []
                    // console.log(this.Column.categories,this.Column.series[0].data,"ssssssssssssssssss")
                } else {
                    let table8 = res.data.result.list.data
                    console.log(table8, "table8table8table8table8table8")
                    this.overView[0].number = table8[0].unit_consumption
                    this.overView[1].number = table8[0].yield
                    this.overView[2].number = table8[0].consumption
                    this.overView[3].number = table8[0].card_num
                    this.table = res.data.result.list.data
                }
            })
        },
        //获取分展示子内容
        getSon() {
            request({
                url: "v1/equipment/all",
                method: "GET"
            }).then(res => {
                console.log(res, "----------------------")
                this.array.list = res.data.result
                this.formdata.equipment_id = res.data.result[0].id // 默认渲染第一个设备数据
                this.selectData = res.data.result[0].name
                this.tuBiaoId = res.data.result[0].id
                console.log(this.array.list)
                this.getEnergy();

            })
        },
        // 切换柱形图
        getQieHuanShuzu66(index, selectData) {
            request({
                url: "v1/YieldReport/list",
                data: this.formdata
            }).then(res => {
                console.log(res)
                if (index == 0) {
                    if (selectData == 0) {
                        let Xrow = res.data.result.spot.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow
                        let Yrow = res.data.result.spot.map(item => {
                            return item.unit_consumption
                        });
                        this.Column.series[0].data = Yrow
                    } else if (selectData == 7) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 7).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.unit_consumption
                        });
                        this.Column.series[0].data = Yrow.slice(0, 7).reverse()
                    } else if (selectData == 15) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 15).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.unit_consumption
                        });
                        this.Column.series[0].data = Yrow.slice(0, 15).reverse()
                    } else if (selectData == 30) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 30).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.unit_consumption
                        });
                        this.Column.series[0].data = Yrow.slice(0, 30).reverse()
                    }
                } else if (index == 1) {
                    if (selectData == 0) {
                        let Xrow = res.data.result.spot.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow
                        let Yrow = res.data.result.spot.map(item => {
                            return item.yield
                        });
                        this.Column.series[0].data = Yrow
                    } else if (selectData == 7) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 7).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.yield
                        });
                        this.Column.series[0].data = Yrow.slice(0, 7).reverse()
                    } else if (selectData == 15) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 15).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.yield
                        });
                        this.Column.series[0].data = Yrow.slice(0, 15).reverse()
                    } else if (selectData == 30) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 30).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.yield
                        });
                        this.Column.series[0].data = Yrow.slice(0, 30).reverse()
                    }
                } else if (index == 2) {
                    if (selectData == 0) {
                        let Xrow = res.data.result.spot.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow
                        let Yrow = res.data.result.spot.map(item => {
                            return item.consumption
                        });
                        this.Column.series[0].data = Yrow
                    } else if (selectData == 7) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 7).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.consumption
                        });
                        this.Column.series[0].data = Yrow.slice(0, 7).reverse()

                    } else if (selectData == 15) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 15).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.consumption
                        });
                        this.Column.series[0].data = Yrow.slice(0, 15).reverse()

                    } else if (selectData == 30) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 30).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.consumption
                        });
                        this.Column.series[0].data = Yrow.slice(0, 30).reverse()

                    }
                } else if (index == 3) {
                    if (selectData == 0) {
                        let Xrow = res.data.result.spot.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow
                        let Yrow = res.data.result.spot.map(item => {
                            return item.card_num
                        });
                        this.Column.series[0].data = Yrow
                    } else if (selectData == 7) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 7).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.card_num
                        });
                        this.Column.series[0].data = Yrow.slice(0, 7).reverse()
                    } else if (selectData == 15) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 15).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.card_num
                        });
                        this.Column.series[0].data = Yrow.slice(0, 15).reverse()
                    } else if (selectData == 30) {
                        let Xrow = res.data.result.list.data.map(item => {
                            return item.statistics_date
                        });
                        this.Column.categories = Xrow.slice(0, 30).reverse()
                        let Yrow = res.data.result.list.data.map(item => {
                            return item.card_num
                        });
                        this.Column.series[0].data = Yrow.slice(0, 30).reverse()
                    }
                }
            })
        },
        getEnergy() {
            // this.selectDay = 7
            request({
                url: "v1/YieldReport/list",
                data: {
                    equipment_id: this.formdata.equipment_id,
                    near_hour: this.formdata.near_hour
                }
            }).then(res => {
                if (res.data.errorcode == 401) {
                    // uni.showModal({
                    //     title: res.data.messages,
                    //     showCancel: false
                    // });
                } else {
                    console.log(this.formdata.near_hour, "这里吗")
                    let table2 = res.data.result.list.data
                    this.table = table2
                    let arr2 = res.data.result.list.data
                    let arr3 = arr2
                    this.maxPage = res.data.result.list.last_page
                    console.log(res, "this.tiemTxtthis.tiemTxtthis.tiemTxtthis.tiemTxtthis.tiemTxt")
                    this.tiemTxt = arr3[0].statistics_date
                    this.overView[0].number = arr3[0].unit_consumption
                    this.overView[1].number = arr3[0].yield
                    this.overView[2].number = arr3[0].consumption
                    this.overView[3].number = arr3[0].card_num
                    this.time = {
                        start: "选择开始时间",
                        end: "选择结束时间"
                    }
                }

            })
        },
        //获取事件/属性值/最近三十天
        getTime() {
            request({
                url: `v1/data/list?page=1&equipment_id=4`,
                method: "GET"
            }).then(res => {
                console.log(res, "++++++++================")
                this.table = res.data.result.list.data
                this.tiemTxt = res.data.result.list.data[0].created_at
                // this.selectData = res.data.result.list.data[]
                let Xrow = res.data.result.list.data.map(item => {
                    // console.log(item.created_at,"{{{{{{{{{{{")
                    return item.created_at
                });
                let Yrow = res.data.result.list.data.map(item => {
                    // console.log(item.created_at,"{{{{{{{{{{{")
                    return item.data_value
                });
                console.log(Xrow, "XrowXrowXrowXrowXrowXrowXrow")
                console.log(Yrow, "YrowYrowYrowYrowYrowYrowYrow")
                this.Column.categories = Xrow.slice(0, 10).reverse()
                this.Column.series[0].data = Yrow.slice(0, 10).reverse()
                // console.log(this.table, "2222222222222222")        
            })
        },
        bindPickerStartDay(e) {
            // console.log(e);
            this.time.start = e.detail.value
            this.formdata = {
                equipment_id: this.tuBiaoId,
                statistics_date_start: this.time.start,
                statistics_date_end: this.time.end
            }
            request({
                url: "v1/YieldReport/list",
                data: this.formdata
            }).then(res => {
                this.table = res.data.result.list.data
                let arr2 = res.data.result.list.data
                arr2 = arr2.slice(-1)

                let Xrow = res.data.result.spot.map(item => {
                    return item.statistics_date
                });
                let Yrow = res.data.result.spot.map(item => {
                    return item.unit_consumption
                });
                this.Column.categories = Xrow
                this.Column.series[0].data = Yrow
            })
        },
        bindPickerEndDay(e) {
            this.time.end = e.detail.value
            this.formdata = {
                equipment_id: this.tuBiaoId,
                statistics_date_start: this.time.start,
                statistics_date_end: this.time.end
            }
            request({
                url: "v1/YieldReport/list",
                data: this.formdata
            }).then(res => {
                this.table = res.data.result.list.data
                let arr2 = res.data.result.list.data
                arr2 = arr2.slice(-1)
                let Xrow = res.data.result.spot.map(item => {
                    return item.statistics_date
                });
                let Yrow = res.data.result.spot.map(item => {
                    return item.unit_consumption
                });
                this.Column.categories = Xrow
                this.Column.series[0].data = Yrow
            })
        },
        changeType(index) {
            this.tableType.current = index;
            console.log(index)
            if (index === 1) {
                // this.formdata = {
                //     equipment_id: this.formdata.equipment_id,
                //     near_hour: this.formdata.near_hour
                // }
                this.getQieHuanShuzu66(this.showTd, this.selectDay)
                // console.log(this.showTd, this.selectDay, "66666666666666666666666")
                // this.getServerData()
                // console.log("能进来这里吗")
                // this.$set(this.Column.series[0], "name", "平均能耗")
                // request({
                //     url: "v1/YieldReport/list",
                //     data: {
                //         equipment_id: this.formdata.equipment_id,
                //         near_hour: this.formdata.near_hour
                //     }
                // }).then(res => {
                //     console.log(res)
                //     let Xrow = res.data.result.list.data.map(item => {
                //         return item.statistics_date
                //     });
                //     let Yrow = res.data.result.list.data.map(item => {
                //         return item.unit_consumption
                //     });
                //     this.Column.categories = Xrow.slice(0, 9).reverse()
                //     this.Column.series[0].data = Yrow.slice(0, 9).reverse()
                //     // console.log(res, "getQieHuanShuzu")
                // })
                // this.getServerData()
            }
        },
        changeTime(index) {
            console.log(index)
            this.lately.current = index;
            if (index === 0) {
                // this.showTd = 0
                this.selectDay = 7
                this.getRecently(7)
            } else if (index === 1) {
                // this.showTd = 1
                this.selectDay = 15
                this.getRecently(15)
            } else if (index === 2) {
                this.selectDay = 30
                // this.showTd = 2
                this.getRecently(30)
            }
            // this.saixuanDate()

        },
        // 最近七天 十五天 三十天
        getRecently(day) {
            // console.log(day, "daydaydaydaydaydaydaydaydayday")
            this.day1 = day
            request({
                url: "v1/YieldReport/list",
                data: {
                    near_hour: this.day1,
                    equipment_id: this.tuBiaoId,
                    statistics_date_start: this.getYear2(this.day1),
                    statistics_date_end: this.getYear()
                }
            }).then(res => {
                console.log(res)
                this.table = res.data.result.list.data

            })
        },
        getServerData() {
            this.showColumn("canvasColumn", this.Column);
        },
        showColumn(canvasId, chartData) {
            canvaLineA = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: "column",
                legend: {
                    show: true
                },
                fontSize: 11,
                background: "#FFFFFF",
                pixelRatio: _self.pixelRatio,
                animation: true,
                categories: chartData.categories,
                series: chartData.series,

                xAxis: {
                    enableScroll: true,
                    scrollAlign: true,
                    disableGrid: true,
                    rotateLabel: true,
                    labelCount: 5,
                    scrollShow: true,
                    itemCount: 1
                },
                yAxis: {
                    //disabled:true
                    max: 200,
                    min: 0
                },
                dataLabel: false,
                width: _self.cWidth * _self.pixelRatio,
                height: _self.cHeight * _self.pixelRatio,
                extra: {
                    column: {
                        type: "group",
                        width: (_self.cWidth * _self.pixelRatio * 0.45) /
                            chartData.categories.length < 5 ? (_self.cWidth * _self.pixelRatio * 0.45) /
                            chartData.categories.length : 30,
                        // width: 30
                    }
                }
            });
        },
        touchColumn(e) {
            canvaLineA.showToolTip(e, {
                format: function (item, category) {
                    if (typeof item.data === "object") {
                        return (
                            category + " " + item.name + ":" + item.data.value
                        );
                    } else {
                        return category + " " + item.name + ":" + item.data;
                    }
                }
            });
        },
    },
    //获取全部数据的平均能耗  
    onShow(options) {
        //假设传过来equipment_id=1
        // let equipment_id = options.id
        let equipment_id = 1
        _self = this;
        this.cWidth = uni.upx2px(750);
        this.cHeight = uni.upx2px(500);
        this.getServerData();
        // this.getTime();
        this.getSon()

    },
    watch: {
        'Column.categories'() {
            this.getServerData()
        }
    },
    components: {
        Row,
        QSpicker,
        // uCharts
    },
}
</script>

<style lang="scss">
.navTop {
    position: fixed;
    top: 150rpx;
    z-index: 99;
    width: 750rpx;
    background: #e4ecf3;
}

.td {
    width: 50%;

}

.status_bar {
    // top: 0rpx;
    // position: fixed;
    position: fixed;
    width: 100%;
    top: 0;
    height: var(--status-bar-height);
    // width: 100%;
    background: #0c69a4;

}

.bgTop {
    position: fixed;
    width: 100%;
    top: var(--status-bar-height);
    background: #0c69a4;
    height: 115rpx;

    .leftNav {
        // margin-top: 60rpx;
        margin-left: -30rpx;
        width: 250rpx;
        height: 50rpx;
        // border: 1rpx solid pink;
        display: flex;
        justify-content: center;
        font-size: 26rpx;

        .leftNav-text {
            display: flex;
            justify-content: center;
            text-align: center;
            align-content: center;
            line-height: 50rpx;
            color: white;
        }

        img {
            position: relative;
            top: -45rpx;
            left: 135rpx;
            width: 40rpx;
            height: 40rpx;
        }
    }
}

.briefing {
    background: #ffffff;

    .time-txt {
        margin-top: 170rpx;
    }

    .t {
        view {
            .pillar {
                margin: 0 auto;
                width: 664rpx;
                height: 660rpx;
                border: 1rpx solid #e5ecf3;
            }
        }
    }

}

$bg: #f0f4f8;

.day-type {
    padding: 0 $spacing-center;

    .day-nav {
        background: $bg;
        width: 65%;
        height: 55rpx;
        padding-top: 10rpx;
        padding-left: 15rpx;
        border-radius: 5rpx;
        box-sizing: border-box;
        border: 1rpx solid $border-grey;

        text {
            margin: 0 $spacing-s;
        }
    }

    .type-nav {
        margin-left: 5%;
        width: 30%;
        background: $bg;
        border-radius: 5rpx;

        .item {
            line-height: 45rpx;
            box-sizing: border-box;
            padding-top: 5rpx;
            flex: 1;
            text-align: center;
            height: 55rpx;
        }

        .act {
            background: $color-theme-blue;
            color: #fff;
        }
    }
}

.lately {
    padding: $spacing-center;

    .lately-nav {
        background: $bg;

        .item {
            flex: 1;
            text-align: center;
            font-size: 0;
            padding: 15rpx 0;
        }

        .act {
            background: $color-theme-blue;
            color: #fff;
        }

        text {
            font-size: $fs-base + 3;
        }
    }
}

page {
    background: #f2f2f2;
    width: 750upx;
    overflow-x: hidden;
}

.qiun-padding {
    padding: 2%;
    width: 96%;
}

.qiun-wrap {
    display: flex;
    flex-wrap: wrap;
}

.qiun-rows {
    display: flex;
    flex-direction: row !important;
}

.qiun-columns {
    display: flex;
    flex-direction: column !important;
}

.qiun-common-mt {
    margin-top: 10upx;
}

.qiun-bg-white {
    background: #ffffff;
}

.qiun-title-bar {
    width: 96%;
    padding: 10upx 2%;
    flex-wrap: nowrap;
}

.qiun-title-dot-light {
    border-left: 10upx solid #0ea391;
    padding-left: 10upx;
    font-size: 32upx;
    color: #000000;
}

.qiun-charts {
    position: relative;
    top: 42rpx;
    width: 750upx;
    height: 616upx;
    background-color: #ffffff;
}

.charts {
    z-index: 1;
    width: 750upx;
    height: 500upx;
    background-color: #ffffff;
}
</style>
